<template>
  <Navbar style="margin-bottom: 88px"></Navbar>
  <n-layout class="admin-dashboard" style="margin: 0 24px;">
    <n-layout-header style="height: 64px; background: #fff;">
      <div class="header-title" style="font-weight: bold;font-size: 30px;background-color:#EDEFF0">管理员后台</div>
    </n-layout-header>
    <n-layout has-sider>
      <n-layout-sider width="200" style="background: #f0f2f5;">
        <n-menu
          :options="menuOptions"
          @select="handleMenuSelect"
          :value="selectedMenu"
          style="height: 100%; border-right: 1px solid #e0e0e0;"
        />
      </n-layout-sider>
      <n-layout-content style="padding: 24px; background: #fff;">
        <div class="content-wrapper">
          <component :is="currentComponent" />
        </div>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { NLayout, NLayoutHeader, NLayoutSider, NLayoutContent, NMenu } from 'naive-ui'
import { useAuthStore } from '@/stores/auth'
import Navbar from '@/components/Navbar.vue'
import AdminDashboardWelcome from '@/components/user/adminDashboard/AdminDashboardWelcome.vue'
import ApiManagement from '@/components/user/adminDashboard/ApiManagement.vue'
import ApiAccessStatistics from '@/components/user/adminDashboard/ApiAccessStatistics.vue'
import UserManagement from '@/components/user/adminDashboard/UserManagement.vue'
import PointsManagement from '@/components/user/adminDashboard/PointsManagement.vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    Navbar,
    NLayout,
    NLayoutHeader,
    NLayoutSider,
    NLayoutContent,
    NMenu,
    AdminDashboardWelcome,
    ApiManagement,
    ApiAccessStatistics,
    UserManagement,
    PointsManagement
  },
  setup() {
    const authStore = useAuthStore()
    const currentComponent = ref('AdminDashboardWelcome')
    const selectedMenu = ref('welcome')

    const router = useRouter();

    const menuOptions = [
      { label: '欢迎界面', key: 'welcome' },
      { label: '接口管理', key: 'api-management' },
      { label: '接口访问统计', key: 'api-stats' },
      {
        label: '用户管理',
        key: 'user-management',
        children: [
          { label: '用户信息管理', key: 'user-info' },
          { label: '积分管理', key: 'points' }
        ]
      }
    ]

    const handleMenuSelect = (key: string) => {
      selectedMenu.value = key
      switch (key) {
        case 'welcome':
          currentComponent.value = 'AdminDashboardWelcome'
          break
        case 'api-management':
          currentComponent.value = 'ApiManagement'
          break
        case 'api-stats':
          currentComponent.value = 'ApiAccessStatistics'
          break
        case 'user-info':
          currentComponent.value = 'UserManagement'
          break
        case 'points':
          currentComponent.value = 'PointsManagement'
          break
        default:
          break
      }
    }

    const checkAdminPermission = () => {
      if (authStore.state.user?.userRole !== 'admin') {
        alert('您没有权限访问此页面')
        router.push('/')
      }
    }

    onMounted(() => {
      checkAdminPermission()
    })

    return {
      currentComponent,
      selectedMenu,
      menuOptions,
      handleMenuSelect
    }
  }
})
</script>

<style scoped>
.admin-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 24px;
}

.header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 500px;
  padding: 24px;
  background: #f0f2f5;
  border-radius: 8px;
}

.n-menu {
  height: 100%;
}

.n-menu-item {
  transition: background-color 0.3s;
}

.n-menu-item:hover,
.n-menu-item-active {
  background-color: #e6f7ff;
}
</style>
